﻿
@{
    Layout = null;
}

<!-- 模板 -->
<div class="layui-body-header">
    <ul class="kit-breadcrumb">
        <li class="kit-item">
            <a href="#/">
                <i class="layui-icon">&#xe68e;</i>
                <span>首页</span>
            </a>
        </li>
        <li class="kit-separator">
            <i class="layui-icon">&#xe602;</i>
        </li>
        <li class="kit-item">
            <a href="javascript:;">
                <i class="layui-icon">&#xe658;</i>
                <span>用户管理</span>
            </a>
        </li>
    </ul>
</div>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card" style="margin-bottom:15px;">
                <div class="layui-card-body">
                    <a href="#/user/create" class="layui-btn layui-btn-xs">
                        <i class="layui-icon">&#xe654;</i>
                        <span>增加</span>
                    </a>
                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary" id="search_btn_hash">
                        <i class="layui-icon">&#xe615;</i>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">表格</div>
                <div class="layui-card-body">
                    <table id="demo_hash" lay-filter="test_hash"></table>
                    <script type="text/html" id="barDemo_hash">
                        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" href="#/user/edit?guid={{ d.guid }}">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="search_tpl_hash">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" placeholder="输入登录名搜索.." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" name="realName" placeholder="请输入真实姓名搜索.." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="mobile" placeholder="请输入手机号搜索.." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo_hash"><i class="layui-icon">&#xe615;</i> 搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<!-- 脚本 -->
<script>
    layui.config({
        base: '/src/js/'
    }).use(['jquery', 'table', 'sidebar', 'form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            table = layui.table,
            form = layui.form;

        $('#search_btn_hash').on('click', function () {
            var that = this;
            // console.log($('#search_tpl_hash').html());
            layui.sidebar.render({
                elem: that,
                content: $('#search_tpl_hash').html(),
                title: '搜索',
                shade: true,
                // shadeClose:false,
                // direction: 'left'
                // dynamicRender: false,
                // url: 'views/member/all/search.html',
                width: '500px', //可以设置百分比和px
                done: function () {
                    form.render();

                    //监听提交
                    form.on('submit(formDemo_hash)', function (data) {
                        // layer.msg(JSON.stringify(data.field));
                        table.reload('demo_hash', {
                            where: data.field
                        });
                        return false;
                    });
                }
            });
        });

        //第一个实例
        table.render({
            method: 'post',
            done: function () {
                $('#demo_hash').next().css('height', 'auto');
            },
            request: {
                pageName: 'pageIndex', //页码的参数名称，默认：page
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            limit: 10,
            elem: '#demo_hash',
            height: 600,
            url: '/User/GetPages', //数据接口
            page: true, //开启分页
            cols: [
                [ //表头
                    {
                        field: 'id',
                        title: 'ID',
                        width: 60,
                        sort: true,
                        fixed: 'left'
                    }, {
                        field: 'loginName',
                        title: '登录名',
                        width: 100
                    }, {
                        field: 'password',
                        title: '密码',
                        width: 220
                    }, {
                        field: 'realName',
                        title: '真实姓名',
                        width: 120,
                        sort: true
                    }, {
                        field: 'mobile',
                        title: '手机号',
                        width: 150
                    }, {
                        field: 'createTime',
                        title: '创建时间',
                        width: 180
                    }, {
                        field: 'remark',
                        title: '备注',
                        width: 80,
                        sort: true
                    }, {
                        title: '操作',
                        fixed: 'right',
                        width: 180,
                        align: 'center',
                        toolbar: '#barDemo_hash'
                    }
                ]
            ]
        });

        //监听工具条
        table.on('tool(test_hash)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
                layer.msg(JSON.stringify(data));
                console.log(data);
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除 [<span style="color:red;">' + data.loginName + '</span>] 吗?', { title: '系统提示', icon: 3 }, function (index) {
                    layer.close(index);
                    var layIndex = layer.load(2, {
                        shade: [0.2, '#393D49']
                    });
                    axios.post('/User/Delete', { guid: data.guid })
                        .then(function (response) {
                            if (response.status === 500) {
                                console.log(response);
                                throw new Error(response.statusText);
                            }
                            return response.data;
                        })
                        .then(function (res) {
                            layer.msg(res.message);
                            layer.close(layIndex);
                            if (res.success) {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                            layer.close(layIndex);
                        });
                });
            } else if (layEvent === 'edit') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            }
        });

    });
</script>
<!-- 样式 -->
<style scoped>
</style>